<template>
    <div class="mymenus">
        <div class="img" v-for="menu in  menus " :key="menu.id">
            <img :src="menu.img" alt="">
            <span>{{ menu.title }}</span>
            <span>></span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            menus: [
                { id: 1, img: require("@/assets/imgs/menus1.png"), title: '电影订单' },
                { id: 2, img: require("@/assets/imgs/menus2.png"), title: '组合红包' },
                { id: 3, img: require("@/assets/imgs/menus3.png"), title: '帮助与客服' },
                { id: 4, img: require("@/assets/imgs/menus4.png"), title: '设置' }
            ]
        }
    },
}
</script>

<style lang="less" scoped>
@import url(@/assets/Less/common.less);

.mymenus {
    width: 90%;
    margin-top: 100px;

    .img {
        float: left;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        height: 50px;

        img {
            float: left;
            width: 20px;
            height: 20px;
        }

        span:nth-child(2) {
            float: left;
            display: block;
            margin-left: 10px;
            font-size: 15px;
        }

        span:nth-child(3) {
            float: right;
        }
    }
}
</style>